<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>互动二维码管理</title>
		<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
		<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../../static/css/skins.css">
		<script type="text/javascript" src="../../lib/vue/vue.js"></script>
		<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
		<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
		<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
		<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
		<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../static/js/webApi.js"></script>
		<script type="text/javascript" src="../../static/js/tool.js"></script>
		<script type="text/javascript" charset="utf-8" src="../../static/UEditor/ueditor.config.js"></script>
		<script type="text/javascript" charset="utf-8" src="../../static/UEditor/ueditor.all.js"></script>
		<script type="text/javascript" charset="utf-8" src="../../static/UEditor/lang/zh-cn/zh-cn.js"></script>
		<style type="text/css">
			/*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
			html,
			body,
			#app,
			.el-container {
				/*设置内部填充为0，几个布局元素之间没有间距*/
				padding: 0px;
				/*外部间距也是如此设置*/
				margin: 0px;
				/*统一设置高度为100%*/
				height: 100%;
			}

			.el-main {
				padding: 4px;
			}

			.el-icon-search {
				color: #409EFF;
			}

			.el-icon-refresh-right {
				color: #409EFF;
			}

			[v-cloak] {
				display: none;
			}

			.avatar-uploader .el-upload {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			.avatar-uploader .el-upload:hover {
				border-color: #409EFF;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 178px;
				height: 178px;
				line-height: 178px;
				text-align: center;
			}

			.avatar {
				width: 178px;
				height: 178px;
				display: block;
			}
		</style>
	</head>
	<body>
		<el-container id="app" v-cloak>
			<el-main>
				<el-form :inline="true" :model="queryData" ref="queryData" label-width="80px" label-position="right"
					size="mini" style="height: 35px" @submit.native.prevent>
					<el-form-item label="名称">
						<el-input v-model="queryData.name" clearable placeholder="请输入名称"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button size="mini" icon="el-icon-search" @click="searchEvent">查询</el-button>
						<el-button size="mini" icon="el-icon-refresh-right" @click="searchEventA">重置</el-button>
					</el-form-item>
				</el-form>

				<vxe-grid border ref="xGrid" @page-change="handlePageChange" resizable show-overflow
					highlight-current-row="true" keep-source :height="tableHeight" size="mini"
					:checkbox-config="tableRadio" :pager-config="tablePage" :data="tableData"
					:header-cell-style="{'text-align':'center'}" :loading="dataLoading" :toolbar="tableToolbar"
					:export-config="tableExport" @cell-dblclick="cellDBLClickEvent"
					:edit-config="{trigger:'click', mode:'row'}" @toolbar-button-click="toolbarButtonClickEvent"
					:sort-config="{remot:true}" @sort-change="tableSortChange">
					<vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
					<vxe-table-column field="id" title="序号" width="60" align="center">
					</vxe-table-column>
					<vxe-table-column field="name" title="名称" align="center">
					</vxe-table-column>
					<vxe-table-column field="content" title="内容" align="left">
					</vxe-table-column>
					<vxe-table-column field="qrUrl" title="二维码" width="120">
						<template #default="{ row }">
							<el-popover placement="left" title trigger="hover">
								<img v-if="row.qrUrl" :src="row.qrUrl" :alt="row.qrUrl"
									style="max-height: 500px;max-width: 500px" />
								<img slot="reference" :src="row.qrUrl" style="width: 100px;">
							</el-popover>
						</template>
					</vxe-table-column>
					<vxe-table-column field="createUser" title="创建人" align="center">
					</vxe-table-column>
					<vxe-table-column field="createTime" title="创建时间" align="center" :formatter="formatDate">
					</vxe-table-column>
				</vxe-grid>

				<vxe-modal ref="xModal" v-model="showEdit" :title="selectRow ? '编辑&保存' :'新增&保存'" width="800"
					 resize id="formWindow">
					<el-form v-loading="submitLoading"  :model="formData" :rules="formRules" ref="formData" label-width="120px"
						label-position="right" size="mini">
						<template v-if="visible===true">
							<el-form-item label="ID" prop="id">
								<el-input v-model="formData.id"></el-input>
							</el-form-item>
						</template>
						<el-form-item label="名称" prop="theme">
							<el-input type="text" v-model="formData.name" placeholder="" maxlength="100"
								show-word-limit></el-input>
						</el-form-item>
						<el-form-item label="二维码内容" prop="content">
							<div id="contentEditor" v-model="formData.content"></div>
							<!-- 	<el-input type="text" v-model="formData.content"
								placeholder="http://f3.ttkt.cc:40312?scene=question@id=1" maxlength="100"
								show-word-limit></el-input> -->
						</el-form-item>
						<div style="margin-left:100px;color:red">
							请注意,二维码内容格式:
							http://f3.ttkt.cc:40312?scene=question&id=1,其中答题场景scene固定为question，导览场景为guide,id为问卷id或导览id
						</div>
						<el-form-item style="text-align: right;">
							<el-button type="primary" icon="el-icon-folder" @click="submitEvent('formData')"
								:disabled="disabled" v-cloak>保存</el-button>
							<el-button type="warning" icon="el-icon-refresh" @click="resetEvent('formData')" v-cloak>
								重置
							</el-button>
							<el-button type="warning" icon="el-icon-switch-button" @click="closeEvent('formData')"
								v-cloak>
								退出
							</el-button>
						</el-form-item>
					</el-form>
				</vxe-modal>
			</el-main>
		</el-container>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var main = {
				data() {
					return {
						//排序
						prop: '',
						order: '',
						dataLoading: false,
						loading: false,
						disabled: false,
						visible: false,
						tableHeight: '100%',
						departOptions: [],
						tableData: [],
						//contentEditor: null,
						uploadUrl: "",
						qrUrl: "",
						tablePage: {
							perfect: true,
							total: 0,
							currentPage: 1,
							pageSize: 30,
							align: 'left',
							pageSizes: [30, 50, 100, 200],
							layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
								'Total'
							],
						},
						tableToolbar: {
							id: 'toolbar',
							size: 'mini',
							perfect: true,
							buttons: [],
						},
						tableExport: {
							filename: 'export',
							sheetName: 'Sheet1',
							type: 'xlsx',
							// 自定义类型
							types: ['xlsx', 'csv', 'html', 'xml', 'txt']
						},
						tableRadio: {
							trigger: 'row',
							highlight: true
						},
						submitLoading: false,
						selectRow: null,
						showEdit: false,
						queryData: {
							name: ""
						},
						formData: {
							id: "",
							name: "",
							content: "",
							qrUrl: ""
						},
						formRules: {
							name: [{
									required: true,
									message: '请输入名称'
								},
								{
									min: 1,
									max: 100,
									message: '长度在1到100个字符'
								}
							]
						}
					}
				},
				created() {
					this.findList();
					this.getBtn();
					this.uploadUrl = window.curl + '/attach/uploadAtt';
					UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
					UE.Editor.prototype.getActionUrl = function(action) {
						if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') {
							let path = window.curl + '/attach/uploadUeditorAtt';
							return path; //调用后台接口上传图片   
						} else {
							return this._bkGetActionUrl.call(this, action);
						}
					}
					this.contentEditor = UE.getEditor('contentEditor', {
						initialFrameWidth: '99%',
						initialFrameHeight: 250,
						elementPathEnabled: false, //删除元素路径
						pasteplain: true,
						/* 纯文本粘贴 */
						autoHeightEnabled: true,
						/* 启用右侧滚轮,默认是true自动长高模式*/
						autoFloatEnabled: true
					});
				},
				mounted() {
					this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 5;
				},
				methods: {
					searchEvent() {
						this.findList();
					},
					searchEventA() {
						this.queryData.name = "";
						this.findList();
					},
					getTreeData(data) {
						for (let i = 0; i < data.length; i++) {
							if (data[i].children.length < 1) {
								// children若为空数组，则将children设为undefined
								data[i].children = undefined;
							} else {
								// children若不为空数组，则继续 递归调用 本方法
								this.getTreeData(data[i].children);
							}
						}
						return data;
					},
					getBtn() {
						this.tableToolbar.buttons = []
						let bts = Tool.getButton()
						let btns = []
						this.tableToolbar.buttons = btns.concat(bts)
					},
					//分页
					handlePageChange({
						currentPage,
						pageSize
					}) {
						this.tablePage.currentPage = currentPage
						this.tablePage.pageSize = pageSize
						this.findList()
					},
					findList() {
						let queryParams = Object.assign({
							page: this.tablePage.currentPage,
							rows: this.tablePage.pageSize,
							name: this.queryData.name
						});
						this.dataLoading = true;
						var object = this;
						webApi("/interactionQrcode/getInteractionQrcodePage", "post", queryParams, function(data) {
							object.tableData = data.data.list;
							object.tablePage.total = data.data.total
							object.dataLoading = false;
							// object.getDepartOptions();
						}, function(data) {
							object.tableData = [];
							object.tablePage.total = 0
							object.dataLoading = false;
						});
					},
					getDepartOptions() {
						let that = this;
						webApi('/org/getOrgOptions', 'post', {}, function(data) {
							that.departOptions = that.getTreeData(data.data);
						}, function(xhr, type, errorThrown) {})
					},
					searchEvent(formName, acType) {
						if (acType == 0) {
							this.queryData.name = ""
						}
						this.tablePage.currentPage = 1
						this.findList()
					},
					formatDate({
						cellValue
					}) {
						return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
					},
					toolbarButtonClickEvent({
						code
					}, event) {
						switch (code) {
							case 'reset':
								this.searchEvent(this.queryData, 0)
								break;
							case 'search':
								this.searchEvent(this.queryData, 1)
								break;
							case 'btnInsert':
								var row = this.$refs.xGrid.getCheckboxRecords();
								if (row) {
									var parentCode = row.parentMenuId;
								} else {
									var parentCode = "";
								}
								this.insertEvent(parentCode);
								break;
							case 'btnUpdate':
								if (this.$refs.xGrid.getCheckboxRecords().length == 1) {
									let row = this.$refs.xGrid.getCheckboxRecords()
									this.editEvent(row[0]);
								} else if (this.$refs.xGrid.getCheckboxRecords().length > 1) {
									this.$message({
										message: "数据大于一条，无法修改",
										type: 'warning',
										center: true
									});
								} else {
									this.$message({
										message: "请选择一行数据",
										type: 'warning',
										center: true
									});
								}
								break;
							case 'btnDelete':
								var row = this.$refs.xGrid.getCheckboxRecords();
								// console.log(row)
								if (row.length > 0) {
									this.removeEvent(row);
								} else {
									this.$message({
										message: "请选择需要删除的数据行",
										type: 'warning',
										center: true
									});
								}
								break;
							case 'btnExport':
								this.$refs.xGrid.exportData({
									filename: '菜单列表',
									sheetName: 'Sheet1',
									type: 'xlsx'
								});
								break;
						}
					},
					nameSelected(value) {
						if (value) {
							// console.log(this.$refs.companyNameCas.getCheckedNodes()[0]);
							this.formData.name = this.$refs.companyNameCas.getCheckedNodes()[0].label;
						}
					},
					insertEvent() {
						this.formData = {
							id: "",
							theme: "",
							content: "",
							sendUser: "",
							coverImg: ""
						};
						this.imageUrl = "";
						this.contentEditor.setContent("");
						this.selectRow = null;
						this.showEdit = true;
					},
					submitEvent(formName) {
						this.$refs[formName].validate((valid) => {
							if (valid) {
								this.submitLoading = true;
								this.disabled = true;
								this.formData.content = UE.getEditor('contentEditor').getContent();
								let params = Object.assign(this.formData);
								let that = this;
								webApi('/interactionQrcode/saveInteractionQrcode', 'post', params, function(
									data) {
									that.submitLoading = false;
									if (data.code == 200) {
										that.findList();
										that.$message({
											message: data.msg,
											type: 'success',
											center: true
										});
										that.showEdit = false;
									} else {
										that.$message({
											message: data.msg,
											type: 'error',
											center: true
										});
									}
									that.disabled = false;
								}, function(xhr, type, errorThrown) {
									that.submitLoading = false;
								});

							} else {
								return false;
							}
						});
					},
					resetEvent(formName) {
						this.formData = {
							id: "",
							name: "",
							content: "",
							qrUrl: ""
						};
						this.imageUrl = "";
						this.contentEditor.setContent("");
					},
					closeEvent(formName) {
						this.showEdit = false;
					},
					editEvent(row) {
						this.formData = {
							id: row.id,
							name: row.name,
							content: row.content,
							qrUrl: row.qrUrl
						};
						this.imageUrl = row.qrUrl
						this.contentEditor.setContent(this.formData.content);
						this.selectRow = row;
						this.showEdit = true;

					},
					removeEvent(row) {
						this.$XModal.confirm('您确定要删除该数据?').then(type => {
							if (type === 'confirm') {
								this.submitLoading = true;
								let that = this
								let ids = ""
								row.forEach(item => {
									ids += item.id + ","
								});
								ids = ids.substring(0, ids.length - 1);
								let params = Object.assign({
									id: ids
								});
								webApi('/interactionQrcode/removeInteractionQrcode', 'post', params, function(
									data) {
									if (data.code == 200) {
										that.findList()
										that.$message({
											// message: data.msg,
											message: "删除成功!",
											type: 'success',
											center: true
										});
										that.showEdit = false;
									} else {
										that.$message({
											message: data.msg,
											type: 'error',
											center: true
										});
									}
									that.disabled = false;
								}, function(xhr, type, errorThrown) {});
								this.submitLoading = false;
							}
						});
					},
					cellDBLClickEvent({
						row
					}) {
						this.editEvent(row);
					},
					checkColumnMethod({
						column
					}) {
						if (['companyNo', 'name'].includes(column.property)) {
							return false
						}
						return true
					},
					//表头列排序
					tableSortChange(column, prop, order) {
						//点击排序按钮后拿到column.order，可以发送column.order给后台，后台再根据什么排序来返回排序过后的数据
						console.log(column + '---' + column.prop + '---' + column.order)
						this.order = column.order;
						this.prop = column.prop;
						this.findList();
					}
				}
			};

			var vue = Vue.extend(main);
			new vue().$mount('#app');
		}
	</script>
</html>